<template>
  <div class="bpl2-bg">
    <div class="co-title" @click="goPage">
      <div class="co-title-name">
        <img src="@/assets/cockpit/bpl2-title.png" alt="" />
      </div>
      <div class="co-title-right">
        <!-- <div class="co-title-unit">单位：件</div> -->
        <!-- <div class="co-title-btn1">
          <span>进入分仓</span>
          <i class="el-icon-arrow-right"></i>
        </div> -->
      </div>
    </div>
    <div class="bpl-container">
      <div class="bpl2-left">
        <div class="bpl2-l-title">案卷办理</div>
        <div class="bpl2-l-center">
          <div class="bpl2-lc-per" v-if="infoData.op">{{ percent }}<span>%</span></div>
          <div class="bpl2-lc-name">办结/登记</div>
          <div class="bpl2-lc-num" v-if="infoData.op">
            {{ infoData.op.finishQuantity }}/{{ infoData.op.registerQuantity }}
          </div>
        </div>
        <div class="circle-petal" :class="'circle-petal-light' + lightLeval">
          <i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i> <i></i><i></i><i></i><i></i><i></i
          ><i></i><i></i><i></i><i></i><i></i>
        </div>
        <div class="bpl2-l-pic1"></div>
        <div class="bpl2-l-pic2"></div>
      </div>
      <div class="bpl2-right">
        <div class="bpl2-r-each" v-for="(item, index) in rankList" :key="index">
          <p class="bpl2-re-title">No.{{ item.rankNo }} {{ item.deptName }}</p>
          <div class="bpl2-re-main">
            <div class="bpl2-rem-per"><i :style="{ width: item.percent + '%' }"></i></div>
            <p class="bpl2-rem-num">{{ item.quantity }}</p>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script lang="ts">
import { Vue, Component, Prop, Watch } from 'vue-property-decorator'

@Component({
  name: 'BplItem2',
  components: {}
})
export default class BplItem2 extends Vue {
  @Prop({ default: {} }) infoData!: any
  private num = 15
  private total = 20
  private percent = 0
  private lightLeval = 0
  private rankList: any[] = []
  @Watch('infoData', { deep: true, immediate: true }) dataChange(val: any) {
    if (val) {
      if (val.op) {
        this.percent = Math.round(val.op.onTimeRate * 100)
        this.countPercent()
      }
      if (val.opRanks) {
        this.rankList = val.opRanks
        if (this.rankList.length > 0) {
          this.handleRank()
        }
      }
    }
  }
  goPage() {
    this.$router.push({ path: '/cockpit/approveCabin' })
  }
  mounted() {}
  countPercent() {
    if (this.percent === 0) {
      this.lightLeval = 0
    } else if (this.percent > 0 && this.percent <= 5) {
      this.lightLeval = 1
    } else if (this.percent > 5 && this.percent <= 10) {
      this.lightLeval = 2
    } else if (this.percent > 10 && this.percent <= 15) {
      this.lightLeval = 3
    } else if (this.percent > 15 && this.percent <= 20) {
      this.lightLeval = 4
    } else if (this.percent > 20 && this.percent <= 25) {
      this.lightLeval = 5
    } else if (this.percent > 25 && this.percent <= 30) {
      this.lightLeval = 6
    } else if (this.percent > 30 && this.percent <= 35) {
      this.lightLeval = 7
    } else if (this.percent > 35 && this.percent <= 40) {
      this.lightLeval = 8
    } else if (this.percent > 40 && this.percent <= 45) {
      this.lightLeval = 9
    } else if (this.percent > 45 && this.percent <= 50) {
      this.lightLeval = 10
    } else if (this.percent > 50 && this.percent <= 55) {
      this.lightLeval = 11
    } else if (this.percent > 55 && this.percent <= 60) {
      this.lightLeval = 12
    } else if (this.percent > 60 && this.percent <= 65) {
      this.lightLeval = 13
    } else if (this.percent > 65 && this.percent <= 70) {
      this.lightLeval = 14
    } else if (this.percent > 70 && this.percent <= 75) {
      this.lightLeval = 15
    } else if (this.percent > 75 && this.percent <= 80) {
      this.lightLeval = 16
    } else if (this.percent > 80 && this.percent <= 85) {
      this.lightLeval = 17
    } else if (this.percent > 85 && this.percent <= 90) {
      this.lightLeval = 18
    } else if (this.percent > 90 && this.percent <= 95) {
      this.lightLeval = 19
    } else if (this.percent > 95) {
      this.lightLeval = 20
    }
  }
  handleRank() {
    const maxValue = this.rankList[0].quantity
    this.rankList.forEach((e: any) => {
      e.percent = Math.ceil((e.quantity / maxValue) * 100)
    })
  }
}
</script>
<style lang="scss" scoped>
@import '~@/styles/cockpit.scss';
.bpl2-bg {
  width: 100%;
  height: 100%;
  padding: 12px 30px 12px 16px;
  background: url('~@/assets/cockpit/bpl2-bg.png') no-repeat right center/ 99% 100%;
  position: relative;
  &::before {
    content: '';
    display: block;
    width: 20px;
    height: 103%;
    background: url('~@/assets/cockpit/bpl-bg-line.png') no-repeat 0/ 100% 100%;
    position: absolute;
    left: -10px;
    top: 50%;
    transform: translate(0, -50%);
  }
}
.co-title {
  cursor: pointer;
}
.co-title-unit {
  font-size: 12px !important;
  line-height: 20px;
  color: #dffeff;
}
.co-title-btn1 {
  width: 100px;
  height: 28px;
  background: url('~@/assets/cockpit/co-title-btn1.png') no-repeat 0/ 100% 100%;
  padding: 4px 10px;
  display: flex;
  flex-flow: row nowrap;
  justify-content: space-between;
  align-items: center;
  cursor: pointer;
  > span {
    font-size: 14px !important;
    color: #fff;
  }
  > i {
    font-size: 16px !important;
    color: #bffeff;
    font-weight: 600;
    transition: all 0.2s ease;
  }
  &:hover {
    > i {
      transform: translate(2px, 0);
    }
  }
}
.bpl-container {
  display: flex;
  flex-flow: row nowrap;
  justify-content: space-between;
}
@font-face {
  font-family: DINAlternateBold;
  src: url('~@/assets/cockpit/DINAlternateBold.ttf');
}
.bpl2-left {
  flex: none;
  width: 52%;
  height: 160px;
  position: relative;
  .bpl2-l-title {
    font-size: 14px;
    line-height: 20px;
    color: #fff;
    text-align: center;
  }
  .bpl2-l-center {
    width: 100%;
    position: absolute;
    left: 0;
    bottom: 54px;
    z-index: 10;
    .bpl2-lc-per {
      width: 83px;
      height: 44px;
      padding: 8px 24px 8px 10px;
      background: url('~@/assets/cockpit/bpl2-lc-per.png') no-repeat 0/ 100% 100%;
      font-family: DINAlternateBold;
      font-size: 20px !important;
      line-height: 24px;
      color: #fff;
      text-align: center;
      margin: 0 auto -6px;
      > span {
        font-family: DINAlternateBold;
        font-size: 12px !important;
        color: #fff;
      }
    }
    .bpl2-lc-name {
      font-size: 12px !important;
      line-height: 20px;
      color: #bffeff;
      text-align: center;
    }
    .bpl2-lc-num {
      font-size: 16px !important;
      line-height: 20px;
      color: #fff;
      text-align: center;
    }
  }
  .bpl2-l-pic1 {
    width: 80px;
    height: 40px;
    background: url('~@/assets/cockpit/bpl2-l-pic1.png') no-repeat 0/ 100% 100%;
    position: absolute;
    left: 50%;
    bottom: 50px;
    transform: translate(-50%, 0);
    z-index: 5;
  }
  .bpl2-l-pic2 {
    width: 184px;
    height: 121px;
    background: url('~@/assets/cockpit/bpl2-l-pic2.png') no-repeat 0/ 100% 100%;
    position: absolute;
    left: 50%;
    bottom: 0px;
    transform: translate(-50%, 0);
    z-index: 5;
  }
}
.bpl2-right {
  flex: none;
  width: 44%;
  .bpl2-r-each {
    width: 100%;
    .bpl2-re-title {
      width: 100%;
      font-size: 12px !important;
      line-height: 16px;
      color: #fff;
      text-align: left;
    }
    .bpl2-re-main {
      width: 100%;
      display: flex;
      flex-flow: row nowrap;
      justify-content: space-between;
      align-items: center;
      .bpl2-rem-per {
        flex: none;
        width: 124px;
        > i {
          display: block;
          height: 4px;
          background: url('~@/assets/cockpit/bpl2-rem-per.png') no-repeat 0/ 124px 100%;
        }
      }
      .bpl2-rem-num {
        flex: none;
        font-size: 12px !important;
        line-height: 16px;
        color: #fff;
        text-align: right;
      }
    }
  }
}
</style>
